<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body onresize="myFunc()">
    <p>调整窗口大小以显示此框架的高度和宽度:</p>

    <p id="para"></p>
    <p>单击按钮打开一个新的浏览器窗口:</p>

    <button onclick="windowOpen()">打开窗口</button>

    <script>
      //计算窗口大小
      var w = window.innerWidth;
      var h = window.innerHeight;
      document.write("Width: " + w + "<br>Height: " + h + "<br>");

      //跨浏览器解决方案
      var w1 =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      var h1 =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      document.write("Width: " + w1 + "<br>Height: " + h1 + "<br>");

      //使用onresize事件显示高度和宽度
      function myFunc() {
        var w = window.innerWidth;
        var h = window.innerHeight;
        document.getElementById("para").innerHTML =
          "Width: " + w + "<br>Height: " + h;
      }

      //开启新窗口
      function windowOpen() {
        window.open("", "", "width=400, height=300");
      }
    </script>
  </body>
</html>
